paint-brush
बूटस्ट्रैप सीएसएस अभी भी श * टी है लेकिन हम इसे बेहतर बना सकते हैंद्वारा@thefullstackdev
1,384 रीडिंग
1,384 रीडिंग

बूटस्ट्रैप सीएसएस अभी भी श * टी है लेकिन हम इसे बेहतर बना सकते हैं

द्वारा Wes | The Full Stack Dev
Wes | The Full Stack Dev HackerNoon profile picture

Wes | The Full Stack Dev

@thefullstackdev

Hi, I'm Wes I simplify complex topics - like...

1 मिनट read2022/07/02
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript

बहुत लंबा; पढ़ने के लिए

बूटस्ट्रैप सीएसएस का उपयोग करके थक गए हैं, लेकिन आश्वस्त नहीं हैं कि क्या यूआई आपकी इमारत वास्तव में अच्छी दिखती है? बेहतर बूटस्ट्रैप कोड उदाहरणों के साथ डिज़ाइन युक्तियों की एक श्रृंखला है जो आपको यह सिखाने के लिए है कि बूटस्ट्रैप CSS का उपयोग करते हुए पेशेवर दिखने वाले UI को कैसे बनाया जाए।

Company Mentioned

Mention Thumbnail
Twitter
featured image - बूटस्ट्रैप सीएसएस अभी भी श * टी है लेकिन हम इसे बेहतर बना सकते हैं
Wes | The Full Stack Dev HackerNoon profile picture
Wes | The Full Stack Dev

Wes | The Full Stack Dev

@thefullstackdev

Hi, I'm Wes I simplify complex topics - like web development and design - and cure your imposter syndrome.

बूटस्ट्रैप उन लोगों के लिए एक अद्भुत सीएसएस ढांचा है जो डिजाइन, सीएसएस के साथ संघर्ष करते हैं, या जल्दी से कुछ बनाने की जरूरत है।


लेकिन दस्तावेज़ से कॉपी और पेस्ट करने वाले बूटस्ट्रैप घटकों में खामियां हैं।


ये खामियां आपके डिजाइनों को रोक रही हैं!


यहां उन कमियों को ठीक करने और बूटस्ट्रैप को बेहतर बनाने के लिए 5 डिज़ाइन युक्तियां दी गई हैं।


1) अलर्ट पर ध्यान दें

उपयोगकर्ता का ध्यान आकर्षित करने के लिए डार्क बॉर्डर और svg आइकन जोड़ें।

Imgur

Imgur

 <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center"> <!-- https://heroicons.com/ light-bul--> <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>


2) टेबल्स का आपके डेटाबेस से मेल नहीं होना चाहिए

HTML तालिकाओं को आपके डेटाबेस संरचना की एक प्रति होने की आवश्यकता नहीं है। कॉलम नाम, आईडी निकालें, और जब यह समझ में आता है तो फ़ील्ड को गठबंधन करें।

Imgur

Imgur

 <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>


3) सेकेंडरी बटन को बैकग्राउंड कलर की जरूरत नहीं होती

प्राथमिक क्रियाओं को पृष्ठभूमि का रंग देने और द्वितीयक क्रियाओं को कोई पृष्ठभूमि रंग देने से महत्व की एक विरासत स्थापित नहीं होगी।

Imgur

Imgur

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>


4) सब कुछ लेबल करना बंद करो!

देव मूल्यों को लेबल करना पसंद करते हैं। इसे रोक! जानकारी को इस तरह प्रदर्शित करें जैसे कि वह किसी पुस्तक का एक वाक्य हो, न कि कुंजी मान युग्म।

Imgur

Imgur

 <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>


5) छाया> सीमाएँ

कार्ड बॉर्डर अक्सर भद्दे लगते हैं। छाया तत्वों पर जोर देती है और पृष्ठ को गहराई देती है, जिससे तत्व उपयोगकर्ता के करीब महसूस करता है।

Imgur

Imgur

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div>

अधिक बूटस्ट्रैप डिजाइन युक्तियाँ ??

अगर आपको यह पसंद आया, तो मेरे नए प्रोजेक्ट - बेटर बूटस्ट्रैप की जाँच करने पर विचार करें

वहां आपको इस लेख की तरह अधिक बूटस्ट्रैप डिज़ाइन युक्तियों वाली एक निःशुल्क पुस्तक मिलेगी।


️ - वेस

L O A D I N G
. . . comments & more!

About Author

Wes | The Full Stack Dev HackerNoon profile picture
Wes | The Full Stack Dev@thefullstackdev
Hi, I'm Wes I simplify complex topics - like web development and design - and cure your imposter syndrome.

लेबल

इस लेख में चित्रित किया गया था...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here

Mentioned in this story

companies
X REMOVE AD